<template>
    <component :is="tag" :style="styleProps" class="g-text-component" @click="handleClick">
        {{ text }}
    </component>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { textDefaultProps, transformToComponentProps, textStylePropNames } from '../defaultProps';
import useComponentCommon from '../hooks/useComponentCommon'
const defaultProps = transformToComponentProps(textDefaultProps);

export default defineComponent({
    name: 'g-text',
    props: {
        tag: {
            type: String,
            default: 'div',
        },
        ...defaultProps,
    },
    setup(props) {
      const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames)

      return {
        styleProps,
        handleClick
      }
    },
});
</script>

<style>
h2.g-text-component, p.g-text-component {
  margin-bottom: 0;
}
button.g-text-component {
  padding: 5px 10px;
  cursor: pointer;
}
.g-text-component {
  box-sizing: border-box;
  white-space: pre-wrap;
  position: relative !important;
}
</style>